<template>
  <div class="footer-container">
    <!-- 展开/收起按钮 -->
    <button class="toggle-btn" @click="toggleCollapse">
      <i :class="isCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
      {{ isCollapsed ? '展开' : '收起' }}
    </button>

    <!-- 可收缩内容（默认隐藏） -->
    <div class="collapsible-content" :class="{ 'hidden': isCollapsed }">
      <p>由 lijia 个人独立开发</p>
      <p>本软件所有功能完全免费</p>
      <p>联系我们VX: L2545451941</p>>
    </div>

    <!-- 核心版权信息（始终显示，垂直排列+窄版居中） -->
    <div class="copyright-info">
      <p class="legal-warning">© 2025 阿里星海 ·lijia    保留所有权利。  未经授权将本软件用于商用等侵权行为，将依法追究法律责任</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterBar',
  data() {
    return {
      isCollapsed: true // 默认收缩状态
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    }
  }
}
</script>

<style scoped>
.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-top: 1px solid #ebeef5;
  padding: 10px 20px;
  margin-top: auto; /* 固定在页面底部（如果是布局需要） */
}

/* 展开/收起按钮 */
.toggle-btn {
  background: #f8f9fc;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  transition: all 0.3s;
}

.toggle-btn:hover {
  background: #ebeef5;
}

/* 可收缩内容（默认隐藏） */
.collapsible-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.collapsible-content.hidden {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
}

/* 核心版权信息（垂直排列+窄版居中） */
.copyright-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 300px; /* 拉窄宽度，让内容更紧凑 */
  text-align: center;
  color: #909399;
  font-size: 12px;
}

/* 法律声明强调 */
.legal-warning {
  color: #f56c6c;
  margin: 0;
}

/* 适配小屏幕 */
@media (max-width: 500px) {
  .copyright-info {
    max-width: 100%;
  }
}
</style>